<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <link rel="stylesheet" href="/static/lib/layui/css/layui.css">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        /*
        KISSY CSS Reset
        理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
        2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
        3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
        特色：1. 适应中文；2. 基于最新主流浏览器。
        维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
         */

        /** 清除内外边距 **/
        body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
        dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
        pre, /* text formatting elements 文本格式元素 */
        form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
        th, td /* table elements 表格元素 */
        {
            margin: 0;
            padding: 0;
        }

        /** 设置默认字体 **/
        body,
        button, input, select, textarea /* for ie */
        {
            font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
        }

        h1, h2, h3, h4, h5, h6 {
            font-size: 100%;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="layui-row" style="margin: 30px 0 0 0" >
        <div class="layui-col-md3"id="tree">
            <ul>
                <li th:each="tree,state:${areaTree}" style=" margin-bottom: 10px">
                    <i class="layui-icon layui-icon-triangle-r"></i><a th:text="${tree.name}" href="#"></a>
                </li>

            </ul>
        </div>
        <div class="layui-col-md9">
            <form class="layui-form" action="/area/add" method="post">
                <div class="layui-form-item">
                    <label class="layui-form-label">主校区</label>
                    <div class="layui-input-block">
                        <select name="parentId" lay-verify="required">
                            <option th:each="area,state:${areaList}" th:text="${area.name}" th:value="${area.tel}"></option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">子校区</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" required  lay-verify="required" placeholder="输入校区名" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">联系电话</label>
                    <div class="layui-input-block">
                        <input type="text" name="tel" required  lay-verify="required" placeholder="输入联系电话" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">校区状态</label>
                    <div class="layui-input-block">
                        <input type="radio" name="state" value="0" title="正常">
                        <input type="radio" name="state" value="1" title="暂停" checked>
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">到期时间</label>
                    <div class="layui-input-block">
                        <input type="date" name="endtime" class="layui-input" id="date">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

</div>
<script type="application/javascript" src="/static/lib/layui/layui.js"></script>
<script   type="text/javascript" th:inline="javascript">
    var areaTree = [[${areaTree}]]
    layui.use(['tree','laydate'], function () {
        var tree = layui.tree
            ,laydate = layui.laydate;

        //渲染
        /*var inst1 = tree.render({
            elem: '#tree'  //绑定元素
            , data: areaTree
        });*/

        //时间渲染
        var date = laydate.render({
            elem:'#date'
        });
    });
</script>
</body>
</html>
